<template>
	<view id="add">
		<view id="top">
			<view><text>电费</text></view>
			<view>
				 <uni-data-select
				 id="select"
				        v-model="value"
				        :localdata="range"
				        @change="change"
						:clear="false"
				      ></uni-data-select>
			</view>
		</view>
		<view class="title">请输入缴费账户信息</view>
		<view class="name">
			<text>缴费单位</text>
		    <uni-list-item note="广州市供电公司" showArrow :to="`/pages/Living/choosePay/choosePay`" @click="onClick" />
		</view>
		<view class="name2">
			<text>缴费户号</text>
		  <input class="uni-input" focus placeholder="45678943" />
		</view>
	    <view class="footer">
		  <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />
		  <text class="agree">我已阅读并同意</text>
		  <text class="xieyi">《电费缴纳服务协议》</text>
	    </view>
		<navigator url="/pages/Living/payRecord/payRecord" hover-class="navigator-hover">
		<button>下一步</button>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "广州市"
					},
					{
						value: 1,
						text: "惠州市"
					},
				],
			}
		},
		methods: {
			getData:function(){
				this.$http({
					url:"",
					method:"",
					
				}).then(({}))
			}
		}
	}
</script>

<style lang="less" scoped>
	#add{
		#top {
		width: 680rpx;
		height: 150rpx;
		margin: 50rpx auto;
		display: flex;
		border-radius: 8rpx;
		border: 1rpx solid #f5f5f5;
		box-shadow:0rpx 0rpx 20rpx 0rpx #f5f5f5;
		justify-content: space-around;
		align-items: center;
		background-color: #f5f8fd;
		
		#select{
		    border: none;
		    border-bottom: none;
		    width: 300rpx;
		   
		}
	}
	.title{
		color: #9a9a9a;
		margin: 60rpx 0 30rpx 40rpx;
	}
	.name2{
		border-bottom:1rpx solid #e8e8e8;
	}
	.name,.name2{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 680rpx;
		height: 150rpx;
		margin: auto;
		border-top:1rpx solid #e8e8e8;
		
		text{
			width: 200rpx;
			height: 150rpx;
			line-height: 150rpx;
			
		}
		/deep/.uni-input{
			margin-left: 40rpx;
			font-size: 30rpx;
		}
		/deep/.uni-input-input{
			color: #999999 !important;
		}
		.uni-list-item{
			display: inline-block;
			flex: 1;
			height: 150rpx;
			line-height: 150rpx;
			font-size: 24rpx;
		}
		/deep/.uni-list-item__content-note{
			font-size: 30rpx;
		}
	}
	.footer{
		checkbox{
			margin: 50rpx 30rpx;
		}
		:nth-child(2){
			font-size: 30rpx;
		}
		.agree{
			color: #b7b7b7;
		}
		.xieyi{
			color: #2b87fe;
		}
	}
	button{
		width: 680rpx;
		background: #2b87fe;
		height: 100rpx;
		color: white;
		line-height: 100rpx;
	}
	
}
	
</style>
